<template>
  <el-dialog
    v-if="showDialog"
    :title="info.title || '题目详情'"
    :visible.sync="showDialog"
    width="70%"
    @close="close"
  >
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <span>【题型】：{{ info.questionType }}</span>
      </el-col>
      <el-col :span="6">
        <span>【编号】：{{ info.id }}</span>
      </el-col>
      <el-col :span="6">
        <span>【难度】：{{ info.difficulty }}</span>
      </el-col>
      <el-col :span="6">
        <span>【标签】：{{ info.tags }}</span>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <span>【学科】：{{ info.subject }}</span>
      </el-col>
      <el-col :span="6">
        <span>【目录】：{{ info.catalog }}</span>
      </el-col>
      <el-col :span="6">
        <span>【方向】：{{ info.direction }}</span>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <span>【题干】：</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <p v-html="info.question"></p>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-if="info.questionType === '1'">
        <p>{{ info.questionType }}题选项：（以下选中的选项为正确答案）</p>
        <el-radio-group v-model="right[0]">
          <el-row v-for="option in info.options" :key="option.id" style="margin:10px 0">
            <el-radio disabled :label="option.isRight">{{ option.title }}</el-radio>
          </el-row>
        </el-radio-group>
      </el-col>
      <el-col v-else-if="info.questionType === '2'">
        <p>{{ info.questionType }}题选项：（以下选中的选项为正确答案）</p>
        <el-checkbox-group v-model="right">
          <el-row v-for="option in info.options" :key="option.id" style="margin:10px 0">
            <el-checkbox disabled :label="option.isRight">{{ option.title }}</el-checkbox>
          </el-row>
        </el-checkbox-group>
      </el-col>
      <el-col v-else>
        <p>{{ info.questionType }}题答案：</p>
        <div v-html="info.answer" style="padding:1px 20px;minHeight:40px;backgroundColor:#eee;"></div>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <span>【参考答案】：</span>
        <el-button type="danger" @click="showVideo = !showVideo">视频答案预览</el-button>
        <div v-if="showVideo" style="padding: 20px">
          <video width="400px" height="200px" controls :src="info.videoURL"></video>
        </div>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <span>【答案解析】：https://cn.vuejs.org/ 有答案</span>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <span>【答案备注】：https://cn.vuejs.org/ 有答案</span>
      </el-col>
    </el-row>
    <span slot="footer">
      <el-button type="primary" @click="close">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'QuestionInfo',
  components: {},
  props: {},
  data() {
    return {
      showDialog: false,
      info: {},
      right: [1],
      showVideo: false,
      
    }
  },
  watch: {},
  computed: {},
  methods: {
    close() {
      this.info = {}
      this.showDialog = false
    }
  },
  created() {},
  mounted() {}
}
</script>

<style lang="css" scoped>
</style>
